<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>画板</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <canvas id="canvas" width="100" height="100"></canvas>
    <script>
        let canvas = document.getElementById("canvas");
        canvas.width = document.documentElement.clientWidth
        canvas.height = document.documentElement.clientHeight
        let ctx = canvas.getContext("2d");

        let painting = false


        ctx.fillStyle = "black";
        ctx.strokeStyle = 'none'

        canvas.onmousedown = () => {
            painting = true
        }

        canvas.onmousemove = (e) => {
            if (painting === true) {
                ctx.beginPath();
                ctx.arc(e.clientX, e.clientY, 10, 0, 2 * Math.PI);
                ctx.stroke();
                ctx.fill();
            } else {
                console.log('什么都不做')
            }
        }

        canvas.onmouseup = () => {
            painting = false
        }


    </script>
</body>

</html>